{% extends  'htmls/base_template.html' %}
{% load static %}
{% block content_section %}
    <script type="application/javascript">
        var product_list = [];
        function select_product(obj, id) {
            if (obj.checked) {
                product_list.push(id);
            } else {
                product_list.splice(product_list.indexOf(id), 1);
            }

            alert(product_list);
        }
        function delete_products() {
            for (var i = 0; i < product_list.length;) {
                var p_id = product_list[i];
                product_list.splice(i, 1);

                $.post(
                        '{{ delete_product_api_url }}',
                        {'id': p_id},
                        function (data, status) {
                            if (status == 'success') {
                                validate_return(data);
                            } else {

                            }

                        }
                );
            }
            window.location.href = window.location.href = '{{ query_product_page_url }}';
        }
    </script>
    <style type="text/css">
        a.button {
            background-color: red;
            width: 50px;
            color: white;
            text-align: center;
            border: 1.5px solid darkgray;
        }
    </style>
    <div class="panel panel-default" xmlns="http://www.w3.org/1999/html">
        <div class="panel-heading">
            <h3 class="panel-title">产品列表</h3>
        </div>
        <div>
            {% if "ProductModel.添加" in perms %}
                <input type="button" value="添加" onclick="window.location.href='{{ add_product_page_url }}';">
            {% endif %}
            <input type="button" value="删除" onclick="delete_products();">
        </div>
        <div class="panel-body">
            <script type="text/javascript">


                jQuery(document).ready(function ($) {

                    $("#example-2").dataTable({
                        dom: "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                        aLengthMenu: [
                            [5, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
                        ],
                        bProcessing: true,
                        bPaginate: true,
                        fnDraw: false,
                        bLengthChange: true,
                        bStateSave: false,
                        bServerSide: true,
                        sServerMethod: "POST",
                        sAjaxSource: "{{ query_product_api_url }}",
                        fnServerParams: function (aoData) {
                        },
                        columns: [
                            {
                                "data": "id",
                                bSortable: false, "render": function (obj) {
                                return '<input type="checkbox" class="cbr" onchange="select_product(this, ' + obj + ');">';
                            }
                            },
                            {
                                "data": "id", "render": function (obj, type, row, meta) {
                                return to_id('wbjava', 5, Number(obj));
                                {#                                return '<p>'+to_id('wbjava', 5, obj+'</p>';#}
                            }
                            },
                            {"data": "name"},
                            {
                                "data": "img_screen", "render": function (obj, type, row, meta) {
                                return '<img class="img_60" src="' + obj + '">';
                            }
                            },
                            {
                                "data": "img_order", "render": function (obj, type, row, meta) {
                                return '<img src="' + obj + '" class="img_60">';
                            }
                            },
                            {
                                "data": "img_confirm", "render": function (obj, type, row, meta) {
                                return '<img class="img_60" src="' + obj + '">';
                            }
                            },
                            {
                                "data": "img_recom_1", "render": function (obj, type, row, meta) {
                                return '<img class="img_60" src="' + obj + '">';
                            }
                            },
                            {
                                "data": "img_recom_2", "render": function (obj, type, row, meta) {
                                return '<img class="img_60" src="' + obj + '">';
                            }
                            },
                            {"data": "url"},
                            {
                                "data": "status", "render": function (obj) {
                                var status = '在线';
                                if (obj == 0) {
                                    status = '下线';
                                }

                                return '<p>' + status + '</p>';
                            }
                            },
                            {"data": "recommended_value"},
                            {
                                "data": "id",
                                "render": function (obj) {
                                    return '<a href="{{ edit_product_page_url }}?id=' + obj + '" class="btn btn-secondary btn-sm btn-icon">编辑</a>';
                                }
                            }
                        ],
                        language: {
                            "sProcessing": "处理中...",
                            "sLengthMenu": "每页显示 _MENU_ 条结果",
                            "sZeroRecords": "没有匹配结果",
                            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ,_TOTAL_条)",
                            "sInfoEmpty": "显示第 0 至 0 条结果，共 0 条",
                            "infoFiltered": "(从 _MAX_ 条记录过滤)",
                            "sInfoPostFix": "",
                            "sSearch": "模糊搜索:",
                            "sUrl": "",
                            "sEmptyTable": "表中数据为空",
                            "sLoadingRecords": "载入中...",
                            "sProcessing": "<img src='{% static 'assets/images/loding.gif'%}'/> 正在加载数据...",
                            "sInfoThousands": ",",
                            "oPaginate": {
                                "sFirst": "首页",
                                "sPrevious": "上页",
                                "sNext": "下页",
                                "sLast": "末页"
                            }
                        },
                    });
                });
            </script>
            <table class="table table-bordered table-striped" id="example-2"
                   name="id_data_table">
                <thead>
                <tr>
                    <th></th>
                    <th>产品ID</th>
                    <th>产品名称</th>
                    <th>封面图</th>
                    <th>订购页面</th>
                    <th>二次确认页面</th>
                    <th>推荐位1</th>
                    <th>推荐位2</th>
                    <th>游戏地址</th>
                    <th>状态</th>
                    <th>推荐值</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="middle-align">
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}